import React, { Component, Fragment } from "react";
import Swiper from "swiper";
import step_3_1 from "@images/imageXHB/guide/ic_czq@2x.png";
import "swiper/dist/css/swiper.css";
import "./index.scss";

/**
 * 钱包首页轮播
 */
class XhbBannerSwiper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0,
    };
    this.mySwiper = null;
  }
  componentDidMount() {
    let _this = this;
    this.mySwiper = new Swiper(".xhb-banner-swiper", {
      fade: {
        crossFade: true,
      },
      on: {
        slideChange: function () {
          console.log('切换：', this.activeIndex);
          _this.setState({
            activeIndex: this.activeIndex
          });
          let leftDom = document.getElementById('swiper-slide-left');
          let rightDom = document.getElementById('swiper-slide-right');
          if (this.activeIndex == 0) {
            leftDom.style.marginLeft = '0.2rem';
            rightDom.style.marginRight = '0.8rem';
          } else {
            leftDom.style.marginLeft = '0.8rem';
            rightDom.style.marginRight = '0.2rem';
          }
        },
      }
    });
    let leftDom = document.getElementById('swiper-slide-left');
    let rightDom = document.getElementById('swiper-slide-right');
    leftDom.style.marginLeft = '0.2rem';
    rightDom.style.marginRight = '0.8rem';
  }
  updateSlides = () => {
    this.mySwiper && this.mySwiper.updateSlides();
  };

  //跳到第几个
  handleTo = index => {
    this.mySwiper.slideTo(index);
  };
  // 下一个
  handleNext = () => {
    this.mySwiper.slideNext();
  };
  //上一个
  handleprev = () => {
    this.mySwiper.slidePrev();
  };

  handleGotoRecord = () => {
    this.props.history.push(`/xhbRechargeRecord`);
  }

  render() {
    return (
      <Fragment>
        <div className="swiper-container xhb-banner-swiper">
          <div className="swiper-wrapper">
            <div className="swiper-slide">
              <div className="left" id="swiper-slide-left" onClick={this.handleGotoRecord}>
                <div className="step-3-top">
                  <span>已领{this.props.data.rechargeCardNum}张</span>
                </div>
                <div className="slide-box">
                  <span className="slide-bar" style={{ width: `${(1 - (Number(this.props.data.differRechargeCardAmt) / Number(this.props.data.rechargeCardAmount))) * 100}%` }}></span>
                </div>
                <p className="step-3-bot">
                  还差<strong>{this.props.data.differRechargeCardAmt}</strong>元即可获取{this.props.data.rechargeCardAmount}元超市充值卡
                </p>
                <img className="hb" src={step_3_1} alt="" />
              </div>
            </div>
            <div className="swiper-slide">
              <div className="right" id="swiper-slide-right" onClick={this.handleGotoRecord}>
                <div className="right-content">
                  <div className="right-left">
                    <span className="amt">{this.props.data.incomeAmtThisDay}</span>
                    <span className="title">{this.props.data.incomeAmtDate}收益</span>
                  </div>
                  <div className="right-right">
                    <span className="amt">{this.props.data.incomeAmts}</span>
                    <span className="title">累计收益</span>
                  </div>
                </div>
                <div className="detail-btn">详情<span></span></div>
              </div>
            </div>
          </div>
        </div>
        <div className="swiper-banner-bar">
          <div className="scroll">
            <span className={this.state.activeIndex == 0 ? 'bar left-bar' : 'bar right-bar'}></span>
          </div>
        </div>
      </Fragment>
    );
  }
}

export default XhbBannerSwiper;
